<template>
    <view class="container">
        <view class="thumb">
            <image
                :src="info.products.thumb_text"
            />
        </view>

        <view class="info">
            <view class="validate">
                <view class="icon">
                    <image src="/static/images/validate_active.png"></image>
                </view>
                <view class="txt">
                    您查询的产品是官方正品!
                    <view>请放心使用！</view>
                </view>
            </view>

            <view class="line"></view>

            <view class="list">
                <view class="item">
                    <view class="name">
                        查询次数：
                    </view>
                    <view class="value">
                        {{ info.query_num }}
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        您查询的防伪码：
                    </view>
                    <view class="value">
                        {{ info.query_code }}
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        首次查询时间：
                    </view>
                    <view class="value">
                        {{ info.query_time_text }}
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        防伪码所属产品：
                    </view>
                    <view class="value">
                        {{ info.products.name }}
                    </view>
                </view>
            </view>

            <view class="code">
                <image
                    :src="info.query_qrcord_text"
                    show-menu-by-longpress 
                />
            </view>
        </view>
    </view>

    <!-- 消息提示 -->
    <uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;
const code = ref('');
const info = ref({
    products:{}
});
const NoticeRef = ref(null);

onLoad((options) =>
{
    code.value = options?.code ? options.code : '';

    GetInfoData();
});

const GetInfoData = async () =>
{
    const params = {
        code:code.value
    }

    const result = await uni.$uv.http.post('/index/info',params);

    if(result.code === 1)
    {
        info.value = result.data;

        if(!info.value.query_qrcord)
        {
            NoticeRef.value.show({
                type:'error',
                message:'防伪码二维码不存在',
                complete:() =>
                {
                    uni.navigateBack({
                        delta:1
                    });
                }
            });
        }
    }else{
        NoticeRef.value.show({
            type:'error',
            message:result.msg,
            complete:() =>
            {
                uni.navigateBack({
                    delta:1
                });
            }
        });
    }
}

// 业务：如果小程序二维码不存在请重新生成

</script>

<style>
page{
    background-color: #eee;
    padding-bottom:10px;
}

.container{
    width: 95%;
    margin: 0 auto;
    padding-top: 10px;
}

.thumb{
    width: 100%;
    height: 280px;
    border-radius:10px;
    overflow:hidden;
}

.thumb image{
    width:100%;
    height:100%;
    object-fit: cover;
}

.info{
    background:#fff;
    border-radius: 10px;
    overflow:hidden;
    margin-top:10px;
    padding:0 10px 10px;
}

.info .validate{
    display:flex;
    align-items: center;
    padding:10px 0 10px 10px;
}

.info .validate image{
    width:50px;
    height:50px;
    margin-right:10px;
}

.info .validate .txt{
    font-size:14px;
}

.info .validate .txt view{
    font-size:12px;
    color:#9b9b9a;
    margin-top:5px;
}

.info .line{
    width:100%;
    height:1px;
    background:#ebebeb;
    margin:0 auto;
    margin-bottom:10px;
}

.info .list .item{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.info .list .item .name{
    color:#9b9b9a;
}

.info .code{
    width:100%;
    height:280px;
}

.info .code image{
    width:100%;
    height:100%;
}
</style>